React Redux

使用 react-redux 简化操作

vote.container.jsx

import React from "react"
import Main from "./vote.main"
import Footer from "./vote.footer"
import store from "./store/index"
// 1.安装react-redux
// 2.导入Provider
import { Provider } from "react-redux"
const Vote = () => {
  return (
    // 3.使用Provider
    <Provider store={store}>
      <Main />
      <Footer />
    </Provider>
  )
}
export default Vote

vote.main.jsx

import React from "react"
import { connect } from "react-redux"

const Main = (props) => {
  let { supportNum, disapprovalNum } = props
  return (
    <div>
      <div>支持数：{supportNum}</div>
      <div>反对数：{disapprovalNum}</div>
    </div>
  )
}
export default connect((state) => {
  return {
    ...state.vote
  } // 这里只取store中的属性值
}, null)(Main)

vote.footer.jsx

import React from "react"
import Action from "./store/action"
import { connect } from "react-redux"

class Footer extends React.Component {
  render() {
    // 这里获取从store中注入的属性和方法
    let { supportNum, disapprovalNum, support, disapproval } = this.props
    return (
      <div>
        <div>总计人数：{supportNum + disapprovalNum}</div>
        <button onClick={support}>支持</button>
        &nbsp;
        <button onClick={disapproval}>反对</button>
      </div>
    )
  }
}
/**
 * connect方法传递两个参数，处理后分别将变量和方法注入到组件的props中
 *
 * connect(mapStateToProps, mapDispatchToProps) => {
 *
 * }
 */
export default connect(
  (state) => {
    return {
      ...state.vote
    }
  }, //一个是store中保存的公共变量
  Action.vote
  /**
   * 另一个是mapDispatchToProps,自动将action中的方法转换为dispatch调用
   * {
   *    support() {
   *      dispatch(action.vote.support())
   *    },
   *    disapproval() {
   *      dispatch(action.vote.disapproval())
   *    }
   * }
   */
)(Footer)